<template>
  <div class="distribution" box-border pb-30rpx>
    <div class="portrait-box" mx-24rpx mt-20rpx relative text-white flex p-20rpx>
      <image absolute bottom-0 left-0 src="/static/pointTrade/point_bg_1.png" mode=""></image>
      <div class="left" indent-4>
        <div>{{ unitPrice(distributionData.rebateTotal, '￥') }}</div>
        <div>含待结算{{ distributionData.commissionFrozen }}元</div>
      </div>
    </div>

    <div class="statistics" mx-24rpx bg-white px-20rpx>
    	<div class="list" flex py-30rpx>
    		<div class="left" indent-4>
          <div font-semibold>{{ unitPrice(distributionData.rebateTotal, '￥') }}</div>
          <div text-neutral-400 my-14rpx>商品佣金（元）</div>
          <div text-neutral-600>含待结算{{ distributionData.commissionFrozen }}元</div>
        </div>
    		<div class="right" indent-4>
          <div font-semibold>{{ unitPrice(distributionData.rewardPrice?distributionData.rewardPrice:0, '￥') }}</div>
					<div text-neutral-400 my-14rpx>邀请奖励（元）</div>
					<div text-neutral-600>含待结算{{ distributionData.waitRewardPrice?distributionData.waitRewardPrice:0 }}元</div>
        </div>
    	</div>
      <div class="list" flex py-30rpx>
    		<div class="left" indent-4>
          <div font-semibold>{{ unitPrice(distributionData.distributionOrderPrice , '￥') }}</div>
          <div text-neutral-400 my-14rpx>累计销售额</div>
        </div>
    		<div class="right" indent-4>
          <div font-semibold>{{ distributionData.distributionOrderCount }}</div>
          <div text-neutral-400 my-14rpx>订单数</div>
        </div>
    	</div>
    </div>

  </div>
</template>

<script setup lang="ts">
  import { distribution } from "@/api/goods";
  import { unitPrice } from '@/utils/filters';
  const distributionData = ref<any>({});

  async function init() {
    const res = await distribution();
    if (res.data.success) {
      distributionData.value = res.data.result;
    }
  }

  onMounted(() => {
    init()
  })
</script>

<style scoped lang="scss">
  .distribution {
    .portrait-box {
      background: linear-gradient(91deg, #ff6b35 1%, #ff9f28 99%);
      border-radius: 24rpx 24rpx 0 0;
      box-shadow: 6rpx 10rpx 24rpx rgba(126, 126, 126, 0.1);
      > image:first-child {
        width: 263rpx;
        height: 250rpx;
        transform: rotateY(180deg);
      }
      .left, .right {
        width: 50%;
        font-size: 28rpx;
        line-height: 48rpx;
      }
    }
    .statistics {
      font-size: 28rpx;
      border-radius: 0 0 24rpx 24rpx;
      box-shadow: 6rpx 10rpx 24rpx rgba(126, 126, 126, 0.1);
      .list {
        border-bottom: 2rpx solid #f1f2f3;
    		.left, .right {
          width: 50%;
    		}
    	}
    }
  }
</style>
